<template>

  <el-dialog
    title="发票"
    :visible.sync="invoiceVisable"
    width="45%"
    top="10vh"
  >
    <!-- <el-dialog
      width="30%"
      title="内层 Dialog"
      :visible.sync="innerVisible"
      append-to-body
    >
    
    </el-dialog> -->

    <el-tabs
      @tab-click="handleClick"
      v-model="currTap"
    >

      <el-tab-pane
        label="手工开票"
        name="first"
        style="height: 520px"
      >
        <el-scrollbar style="height:90%">
          <manualBilling
            ref="manualBilling"
            :info="this.info"
            @close="close()"
            style="height:90%;overflow-y:auto;overflow-x:hidden;"
          ></manualBilling>
        </el-scrollbar>
      </el-tab-pane>

      <el-tab-pane
        label="开票记录"
        name="second"
      >
        <invoiceList
          ref="invoiceList"
          :info="this.info"
        ></invoiceList>
      </el-tab-pane>
    </el-tabs>

    <div
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        @click="add"
        type="primary"
      >确定</el-button>
      <el-button @click="invoiceVisable = false">取 消</el-button>

    </div>
  </el-dialog>

</template>

<script>
import manualBilling from './manualBilling'
import invoiceList from './invoiceList'
export default {
  props: ['info'],
  data () {
    return {
      invoiceVisable: false,
      innerVisible: false,
      currTap: 'first'
    };
  },
  components: { manualBilling, invoiceList },
  methods: {
    init () {
      this.invoiceVisable = true;
      this.currTap = "first"
      this.$nextTick(() => {
        this.$refs.manualBilling.resetFields();
      })

    },
    handleClick (tab) {
      if (tab.index === '1') {
        console.log("列表")
        this.$refs.invoiceList.getDataList()
      }
    },
    close () {
      console.log("关闭")
      this.invoiceVisable = false
    },
    add () {
      this.$refs.manualBilling.dataFormSubmit()
    }
  }
}
</script>